<template>
	<view>
		<!-- 登录页封面 -->
		<view class="" style="text-align: center; margin: 50px 0 0 30px;">
			<image style="width: 180px;" src="../static/icon/logo2.png" mode="widthFix"></image>
		</view>

		<!-- 登录页主体 -->
		<view class="form-view">
			<uni-forms ref="userFormRef" :model="userForm" :rules="rules">
				<uni-forms-item label="" name="userName">
					<uni-easyinput trim="all" v-model="userForm.userName" placeholder="用户名"
						prefixIcon="person"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="" name="password">
					<uni-easyinput trim="all" v-model="userForm.password" placeholder="密码" prefixIcon="locked"
						type="password"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" class="button-round" @tap="login">登 录</button>

		</view>

		<!-- 其他 -->
		<view class="other-view">
			<text>忘记密码</text>
			<text @tap="toReg">新用户注册</text>
		</view>

	</view>
	<!-- 底部图标 -->
	<view class="bottom-view">
		<view class="icon" style="background-color: #599ee3;">
			<uni-icons type="qq" size="32" color="white"></uni-icons>
		</view>
		<view class="icon" style="background-color: #07c160;">
			<uni-icons type="weixin" size="32" color="white"></uni-icons>
		</view>
		<view class="icon" style="background-color: #fb666c;">
			<uni-icons type="weibo" size="32" color="white"></uni-icons>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const userForm = ref({})
	const userFormRef = ref()
	// 登录---出发表单校验
	import userApi from '@/api/user.js'
	import fileApi from '@/api/file.js'
	import {
		useUserStore
	} from '@/store/store.js';
	const login = () => {
		userFormRef.value.validate().then(res => {
			console.log('表单数据信息：', res);
			// 调用登录API
			userApi.loginUser(userForm.value).then(loginRes => {
				console.log("---->登录表单", userForm.value)
				if (loginRes.code === 200) {
					userApi.getUserInfoByUserName(userForm.value.userName).then(userInfoRes => {
						if (userInfoRes.code === 200) {
							console.log("---->获取用户信息", userInfoRes.data)
							// 登录成功，保存用户信息到本地存储
							uni.setStorageSync('userInfo', userInfoRes.data);
							const userStore = useUserStore();
							userStore.setUserInfo(userInfoRes.data);
							uni.switchTab({
								url: '/pages/index/index'
							});
						}

					}).catch(err => {
						console.error('获取用户信息失败：', err);
					});

				} else {
					// 登录失败，显示错误信息
					uni.showToast({
						icon: 'none',
						title: loginRes.message || '登录失败，请稍后重试',
						duration: 2000
					});
				}
			}).catch(loginErr => {
				// 处理登录API调用失败的情况
				console.error('登录请求失败：', loginErr);
				uni.showToast({
					icon: 'none',
					title: '登录请求失败，请检查网络连接',
					duration: 2000
				});
			});
		}).catch(err => {
			console.log('表单错误信息：', err);
			// 表单验证失败，可以在这里处理错误信息
			uni.showToast({
				icon: 'none',
				title: '请填写正确的表单信息',
				duration: 2000
			});
		});
	};
	const toReg = () => {
		uni.navigateTo({
			url: '/pages/reg/reg'
		});
	}
	// 登录校验规则
	const rules = {
		userName: {
			rules: [{
					required: true,
					errorMessage: '请输入用户名',
				},
				{
					minLength: 3,
					maxLength: 50,
					errorMessage: '用户长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		},
		password: {
			rules: [{
					required: true,
					errorMessage: '请输入密码',
				},
				{
					minLength: 6,
					maxLength: 20,
					errorMessage: '用户长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		},
	}
</script>

<style lang="scss">
	.form-view {
		padding: 30px 30px 10px;
	}

	.other-view {
		padding: 0 30px;
		display: flex;
		justify-content: space-between;
		color: blue;
	}

	.icon {
		height: 46px;
		width: 46px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 23px;
	}

	.bottom-view {
		box-sizing: border-box;
		position: fixed;
		width: 100%;
		bottom: 50px;
		display: flex;
		justify-content: space-around;


	}
</style>